<script setup lang="ts">
import { OrderStatus } from "@/apis/order";
defineProps<{
  status?: number;
}>();
</script>

<template>
  <view class="action" v-if="status === OrderStatus.betake">
    <view class="button primary">再次购买</view>
    <view class="button">取消订单</view>
  </view>
  <view class="action" v-if="status === OrderStatus.awaitDeliver">
    <view class="button primary">取消订单</view>
  </view>
  <view
    class="action"
    v-if="status === OrderStatus.canceled || status === OrderStatus.completed"
  >
    <view class="button primary">再次购买</view>
    <view class="button">删除订单</view>
  </view>
  <view class="action" v-if="status === OrderStatus.evaluate">
    <view class="button primary">再次购买</view>
    <view class="button">去评价</view>
  </view>
  <view class="action" v-if="status === OrderStatus.obligation">
    <view class="button primary">去支付</view>
    <view class="button">取消订单</view>
  </view>
</template>
<style>
.action {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  padding-top: 20rpx;
}
.button {
  width: 200rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  margin-left: 20rpx;
  border-radius: 60rpx;
  border: 1rpx solid #ccc;
  font-size: 26rpx;
  color: #444;
}

.primary {
  color: #27ba9b;
  border-color: #27ba9b;
}
</style>
